import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _GridViewPageState();
  }
}

class _GridViewPageState extends State<GridViewPage> {
  List<String> list = [
    "神威",
    '太白',
    '真武',
    '天香',
    '唐门',
    '丐帮',
    '神刀',
    '五毒',
    '移花',
    '少林'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('SliverGridDelegateWithFixedCrossAxisCount'),
            Container(
              height: 180,
              color: Colors.yellow[100],
              child: _bodyGridView(),
            ),
            Text('GridView.count'),
            Container(
              height: 150,
              color: Colors.green[100],
              child: _bodyCount(),
            ),
            Text('SliverGridDelegateWithMaxCrossAxisExtent'),
            Container(
              height: 180,
              color: Colors.lightBlueAccent[100],
              child: _bodySliverGridDelegateWithMaxCrossAxisExtent(),
            ),
            Text('GridView.extent'),
            Container(
              height: 150,
              color: Colors.redAccent[100],
              child: _bodyExtent(),
            ),
            Text('GridView.build'),
            Container(
              height: 180,
              color: Colors.purpleAccent[100],
              child: _bodyBuild(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _bodyGridView() {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        crossAxisSpacing: 1,
//        childAspectRatio: 1.0,
      ),
      children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.list),
        Icon(Icons.lock),
        Icon(Icons.map),
        Icon(Icons.filter),
        Icon(Icons.headset),
      ],
    );
  }

  Widget _bodyCount() {
    return GridView.count(
      crossAxisCount: 4,
      children: buildItems(),
    );
  }

  Widget _bodySliverGridDelegateWithMaxCrossAxisExtent() {
    return GridView(
      gridDelegate:
          SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 80),
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      children: buildItems(),
    );
  }

  Widget _bodyExtent() {
    return GridView.extent(
      maxCrossAxisExtent: 120.0,
      childAspectRatio: 2.0,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }

  Widget _bodyBuild() {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
        ),
        itemCount: list.length,
        itemBuilder: (context, index) {
          return RaisedButton(
            child: Text(list[index]),
            onPressed: () {},
          );
        });
  }

  List<Widget> buildItems() {
    return list.map((e) {
      return RaisedButton(
        child: Text(e),
        onPressed: () {},
      );
    }).toList();
  }
}
